<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        .box {
            position: relative;
            top: 50px;
            left: 50%;
            width: 120px;
            height: 120px;
        }

        .box:hover {
            height: 120px;
        }

        b {
            position: absolute;
            top: 20px !important;
            left: 20px;
            font-size: 6em;
            -webkit-text-stroke: 2px var(--clr);
            color: var(--clr);
        }
        .b{
            position: absolute;
            top: 0;
            left: 0;
            width: 0px;
            height: 120px;
            overflow: hidden;
            transition: 0.5s ease-in-out;
            /* border-bottom: 3px solid var(--clr); */
            border-right: 3px solid var(--clr);
        }
        .box:hover .b{
            width: 100%;
            height: 100%;
        }
        i {
            position: absolute;
            top: 20px !important;
            left: 20px !important;
            font-size: 6em;
            -webkit-text-stroke: 2px var(--clr);
            color: transparent;
        }
    </style>
</head>

<body>
    <!-- 这部分是在测试如果扩大盒子的同时显示盒子内容 -->
    <!-- 定位不能用百分比,因为要让内容固定 -->
    <div class="box" style="--clr:skyblue">
        <i class="glyphicon glyphicon-king"></i>
        <div class="b">
            <b class="glyphicon glyphicon-king"></b>
        </div>
    </div>
</body>

</html>